<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/supersized.css">
<!-- Font LATO -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>

</head>
<body>
<!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]--> 
<!--[if lt IE 8]>
	<style>
		.panelContent{ width: 733px; padding: 15px 55px 15px 15px}
	</style>
<![endif]--> 
<!-- Add your site or application content here -->


<div id="container">
<div id="accordion">
    <div class="panel active">
      <div class="pink home-menu"></div>
      <div class="panelContent p1"> 
	  	<div class="container-860"><h1 class="logo"><a href="#"><img src="img/logo_homepage.png" width="231" height="72" alt="logo"></a></h1></div>
      </div>
    </div>
    <div class="panel">
      <div class="pink news-menu"></div>
      <div class="panelContent p2">
      <!--NEWS PAGE-->
      	<div class="container-860">
	<section class="container-548 news">
    	<h1>NEWS</h1>
        <h4>BLOOT VS GLOBAL</h4>
        <h5>PUBLISHED: 02.12.2012</h5>
		<div class="share_button">
        	<a class="share" href="#">share</a>
            <a class="fb" href="#">facebook</a>
            <a class="in" href="#">twitter</a>
        </div>
        <div id="slider-news">
        	
        </div>
        <div class="content">
<p>Don&#8216;t fight! make love not war :) . Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus magna mus sit placerat. Sit sit sagittis duis porttitor aenean! Sit sed? Rhoncus lacus dolor nunc, et in adipiscing, sed? Cras vel! <span class="red-text">Porta tempor</span> est sociis ultricies mauris! Parturient, porttitor facilisis, dapibus enim rhoncus, dictumst dis aliquet, duis, montes enim.
Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus magna mus sit placerat. Sit sit sagittis duis porttitor aenean! Sit sed? Rhoncus lacus dolor nunc, et in adipiscing, sed? Cras vel! Porta tempor est sociis ultricies mauris! Parturient, porttitor facilisis, dapibus enim rhoncus, dictumst dis aliquet, duis, montes enim.Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus magna mus sit placerat. Sit sit sagittis duis porttitor aenean! Sit sed? Rhoncus lacus dolor nunc, et in adipiscing, sed? Cras vel! Porta tempor est sociis ultricies mauris! Parturient, porttitor facilisis, dapibus enim rhoncus, dictumst dis aliquet, duis, montes enim.Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus</p>
        </div>
    </section>
</div>

      </div>
    </div>
    <div class="panel">
      <div class="pink work-menu"></div>
      <div class="panelContent p3"> <section class="container-860 work">
    	<h1>WORK</h1>
        <div class="sticky-nav">
          <a href="#" class="active">ALL</a><span>/</span>
          <a href="#">HOUSING</a><span>/</span>
          <a href="#">RESEARCH</a><span>/</span>
          <a href="#">ARCHITECTURE</a><span>/</span>
          <a href="#">SMALL</a><span>/</span>
          <a href="#">LARGE</a>
  		</div>
        <div class="content">
        	<div class="thumb">
            	<a href="#">   
	                <img src="img/thumb-1.jpg" alt="thumb1" class="pc-thumb">
                    <img src="img/thumb-1-iphone.png" width="294" height="213" alt="iphone thumb" class="iphone-thumb">
<div class="thumb-bg">
          <h4>EUROPAN 11</h4>
          <h5>Finalist in international compet</h5>
        </div>
                </a>
            </div>
            <div class="thumb">
            	<a href="#">   
	                <img src="img/thumb-2.jpg" alt="thumb2" class="pc-thumb">          	
                     <img src="img/thumb-1-iphone.png" width="294" height="213" alt="iphone thumb" class="iphone-thumb">
                    <div class="thumb-bg">
                        <h4>EUROPAN 11</h4>
	                    <h5>Finalist in international compet</h5>
                    </div>
                </a>
            </div>
            <div class="thumb">
            	<a href="#">   
	                <img src="img/thumb-3.jpg" alt="thumb1" class="pc-thumb"> 
                     <img src="img/thumb-1-iphone.png" width="294" height="213" alt="iphone thumb" class="iphone-thumb">         	
                    <div class="thumb-bg">
                        <h4>EUROPAN 11</h4>
	                    <h5>Finalist in international compet</h5>
                    </div>
                </a>
            </div>
            <div class="thumb">
            	<a href="#">   
	                <img src="img/thumb-4.jpg" alt="thumb1" class="pc-thumb">
                     <img src="img/thumb-1-iphone.png" width="294" height="213" alt="iphone thumb" class="iphone-thumb">      	
                    <div class="thumb-bg">
                        <h4>EUROPAN 11</h4>
	                    <h5>Finalist in international compet</h5>
                    </div>
                </a>
            </div>
            <div class="thumb">
            	<a href="#">   
	                <img src="img/thumb-5.jpg"  alt="thumb1" class="pc-thumb">   
                     <img src="img/thumb-1-iphone.png" width="294" height="213" alt="iphone thumb" class="iphone-thumb">       	
                    <div class="thumb-bg">
                        <h4>EUROPAN 11</h4>
	                    <h5>Finalist in international compet</h5>
                    </div>
                </a>
            </div>
            <h3 class="site">site: Monkey Republic</h3>
        </div>
    </section>
      </div>
    </div>
    <div class="panel">
      <div class="pink contact-menu"></div>
      <div class="panelContent p4">
      
      <section class="container-860 contact">
    	<h1>CONTACT</h1>
        <div class="sticky-nav"> <a href="#">BLOOT ARCHITECTURE</a></div>

        <div id="google-map">
        	
        </div>
        <div class="content">
<p>LINDESTRAAT 21, 2518 KH  Den Haag<br />
INFO@BLOOTA.NL<br />
06 - 14401648</p>
            <div class="social">
                <a href="#" class="social-mail">Mail</a>
                <a href="#" class="social-fb">Facebook</a>
                <a href="#" class="social-in">Link In</a>
            </div>
            <h3 class="site">site: Monkey Republic</h3>
        </div>
    </section>
      </div>
    </div>
    <div class="panel">
      <div class="pink about-menu"></div>
      <div class="panelContent p4"> 
      <!-- ABOUT US PAGE -->
<div class="container-860">
<section class="container-548 about">
  <h1>ABOUT</h1>
  <div class="sticky-nav">
  <a href="#" class="active">BLOOT</a><span>/</span>
  <a href="#">VISION</a><span>/</span>
  <a href="#">PUBLICATIONS</a><span>/</span>
  <a href="#">AWARDS</a>
  </div>
  
  <img src="img/about-us.jpg" width="548" height="226" alt="about us">
  
  <h4>BLOOT</h4>
  <h5>WIE IS BLOOTHOOFD</h5>
  <div class="share_button"> <a class="share" href="#">share</a> <a class="fb" href="#">facebook</a> <a class="in" href="#">twitter</a> </div>
  <div class="content">
    <p> BLOOT is Tjeerd Bloothoofd. Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus magna mus sit placerat. Sit sit sagittis duis porttitor aenean! Sit sed? Rhoncus lacus dolor nunc, et in adipiscing, sed? Cras vel! Porta tempor est sociis ultricies mauris! Parturient, porttitor facilisis, dapibus enim rhoncus, dictumst dis aliquet, duis, montes enim.
      Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus magna mus sit placerat. Sit sit sagittis duis porttitor aenean! Sit sed? Rhoncus lacus dolor nunc, et in adipiscing, sed? Cras vel! Porta tempor est sociis ultricies mauris! Parturient, porttitor facilisis, dapibus enim rhoncus, dictumst dis aliquet, duis, montes enim.Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus magna mus sit placerat. Sit sit sagittis duis porttitor aenean! Sit sed? Rhoncus lacus dolor nunc, et in adipiscing, sed? Cras vel! Porta tempor est sociis ultricies mauris! Parturient, porttitor facilisis, dapibus enim rhoncus, dictumst dis aliquet, duis, montes enim.Porttitor elit mattis enim et lorem scelerisque arcu tincidunt odio platea montes a placerat ut? Dignissim, elementum proin risus phasellus </p>
  </div>
</section>
</div>
      </div>
    </div>
</div>
</div>





<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> 
<script src="js/plugins.js"></script> 
<script src="js/main.js"></script> 

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
<script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/supersized.3.2.7.min.js"></script>
<script>
$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active'); 
    $("#accordion").delegate('.panel', 'click', function(e){
         if( ! $(this).is('.active') ){
			$(activePanel).animate({width: "78px"}, 300);
			$(this).animate({width: "860px"}, 300);
			$('#accordion .panel').removeClass('active');
			$(this).addClass('active');
			activePanel = this;
		 };
    });
});
</script>
<script>
	jQuery(function($){	
		$.supersized({
			fit_always: 0,
			fit_portrait: 1,
			fit_landscape: 0,
			slideshow: 0,						   
			slides:[
				{image : 'bloot/img/bg-contact.jpg'}
			]
		});
	});
</script>
</body>
</html>
